<template>
  <el-row>
    <!--  筛选条件   -->
    <el-col>
      <el-form :inline="true" :model="resourceFilter" size="small">
        <el-form-item label="名称">
          <el-input v-model="resourceFilter.resourceName" placeholder="资源名称"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="resourceFilter.openMode" placeholder="权限">
            <el-option label="全部" value="0"></el-option>
            <el-option v-for="item of openMode" :label="item['dictValue']" :value="item['dictKey']"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="覆盖范围">
          <el-select v-model="resourceFilter.coverage" placeholder="覆盖范围">
            <el-option label="全部" value="0"></el-option>
            <el-option v-for="item of coverage" :label="item['dictValue']" :value="item['dictKey']"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型">
          <el-select v-model="resourceFilter.dataType" placeholder="数据类型">
            <el-option label="全部" value="0"></el-option>
            <el-option v-for="item of mapDataType" :label="item['dictValue']" :value="item['dictKey']"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="clickSelect">查询</el-button>
          <el-button type="primary" @click="showCreateResource=true">新建资源</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--  数据列表   -->
    <el-col>
      <vxe-table
          border
          resizable
          :row-config="{isCurrent: true, isHover: true}"
          :data="dataList">
        <vxe-column title="封面" width="100">
          <template v-slot="{ row }">
            <img style="width: 70px;height: 70px" v-if="row['surfacePlot'] ==='0'"
                 src="~@/assets/resources-center/no_picture.jpg" alt=""/>
            <img style="width: 70px;height: 70px" v-else :src=" row['surfacePlotImg']" alt=""/>
          </template>
        </vxe-column>
        <vxe-column field="resourceId" title="资源编号"></vxe-column>
        <vxe-column field="resourceName" title="资源名称"></vxe-column>
        <vxe-column field="resourceDescribe" title="描述信息"></vxe-column>
        <vxe-column field="coverageName" title="覆盖范围"></vxe-column>
        <vxe-column field="visitRestrictionName" title="访问权限"></vxe-column>
<!--        <vxe-column field="coverage" title="覆盖范围" :formatter="formatterCoverage"></vxe-column>-->
<!--        <vxe-column field="visitRestriction" title="访问权限" :formatter="formatterOpenMode"></vxe-column>-->
        <vxe-column field="isStartup" title="资源状态" width="100" :formatter="formatterIsStartup"></vxe-column>
        <vxe-column field="createdTime" title="创建时间" width="170"></vxe-column>
        <vxe-column title="操作" width="180" show-overflow>
          <template v-slot="{ row }">
            <el-button type="text" @click="goToEdit(row)">配置</el-button>
            <el-popconfirm title="确定启动吗？" @confirm="updatedState(row,'1')">
              <el-button type="text" style="margin-left: 10px" :disabled="'1'===row['isStartup']" slot="reference">启动
              </el-button>
            </el-popconfirm>
            <el-popconfirm title="确定停止吗？" @confirm="updatedState(row,'2')">
              <el-button type="text" style="margin-left: 10px" :disabled="'1'!==row['isStartup']" slot="reference">停止
              </el-button>
            </el-popconfirm>
            <el-popconfirm title="确定删除吗？" @confirm="del(row)">
              <el-button type="text" style="color: #f10e0e;margin-left: 10px" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </vxe-column>
      </vxe-table>
      <!--   分页   -->
      <vxe-pager
          :current-page.sync="page.currentPage"
          :page-size.sync="page.pageSize"
          :total="page.total"
          @page-change="getDataList"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Total']">
      </vxe-pager>
    </el-col>
    <!--  新建资源  -->
    <create-resource :visit-restriction="openMode"
                     @on-success="createSuccess"
                     :coverage="coverage"
                     :is-show.sync="showCreateResource"
                     :resource-type="1"></create-resource>
  </el-row>
</template>

<script>
/**
 * {地图服务列表}
 *
 * @author: 宋康
 * @date: 2023/2/7
 */
import {
  resourceDict,
  queryResourceItemPage,
  updatedResourceItemState,
  deletedResourceItem
} from '@/api/resources-center/service'
import CreateResource from '@/views/data-center/CreateResource'

export default {
  name: "MapServiceList",
  mixins: [resourceDict],
  components: {
    CreateResource
  },
  data() {
    return {
      resourceFilter: {
        resourceName: '',
        resourceType: '1',
        openMode: '0',
        coverage: '0',
        dataType: '0'
      },
      dataList: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      showCreateResource: false
    }
  },
  methods: {
    /**
     * {点击查询}
     *
     * @author: 宋康
     * @date: 2023/2/15
     */
    clickSelect() {
      this.page.currentPage = 1;
      this.getDataList();
    },
    /**
     * {获取资源列表}
     *
     * @author: 宋康
     * @date: 2023/2/3
     */
    getDataList() {
      this._debounce(() => queryResourceItemPage(this.page.currentPage, this.page.pageSize, this.resourceFilter).then(res => {
        if (res.status) {
          const data = res.data;
          this.dataList = data.records;
          this.page.total = data.total;
        }
      }), 500);
    },
    getDataList1() {
      let res= {
        "code": 200,
        "status": true,
        "msg": "操作成功",
        "data": {
          "records": [
            {
              "resourceId": "1630774853592158209",
              "resourceName": "城区_地图_切片",
              "coverageName": "城区",
              "resourceType": "1",
              "resourceDescribe": "城区_地图_切片",
              "coverage": "1",
              "visitRestriction": "公开",
              "isStartup": "1",
              "createdTime": "2023-03-01 11:39:58",
              "surfacePlot": "1630774853587963906",
              "surfacePlotImg": "http://192.168.8.200/luanzhou/upload/surface/2023/3/23/城区_地图_切片.png",
            },
            {
              "resourceId": "3784698447220181563",
              "resourceName": "全域_地图_切片",
              "coverageName": "全域",
              "resourceType": "1",
              "resourceDescribe": "全域_地图_切片",
              "coverage": "1",
              "visitRestriction": "公开",
              "isStartup": "1",
              "createdTime": "2023-03-01 11:39:58",
              "surfacePlot": "1630774853587963906",
              "surfacePlotImg": "http://192.168.8.200/luanzhou/upload/surface/2023/3/23/全域_地图_切片.png",
            },
            {
              "resourceId": "1630774383293239297",
              "resourceName": "全域数字高程模型",
              "coverageName": "全域",
              "resourceType": "1",
              "resourceDescribe": "全域数字高程模型",
              "coverage": "1",
              "visitRestriction": "公开",
              "isStartup": "1",
              "createdTime": "2023-03-01 11:38:06",
              "surfacePlot": "1630774383289044994",
              "surfacePlotImg": "http://192.168.8.200/luanzhou/upload/surface/2023/3/23/全域数字高程模型.png",
            },
            {
              "resourceId": "1630774327265726466",
              "resourceName": "正射影像_城区",
              "coverageName": "城区",
              "resourceType": "1",
              "resourceDescribe": "正射影像_城区",
              "coverage": "1",
              "visitRestriction": "公开",
              "isStartup": "1",
              "createdTime": "2023-03-01 11:37:53",
              "surfacePlot": "1630774327261532161",
              "surfacePlotImg": "http://192.168.8.200/luanzhou/upload/surface/2023/3/23/正射影像_城区.png",
            }
          ],
          "total": 4,
          "size": 10,
          "current": 1,
          "orders": [],
          "optimizeCountSql": true,
          "searchCount": true,
          "countId": null,
          "maxLimit": null,
          "pages": 1
        }
      }
      let data = res.data;
      this.dataList = data.records;
      this.page.total = data.total;
    },
    /**
     * {跳转编辑}
     *
     * @author: 宋康
     * @date: 2023/2/6
     */
    goToEdit(row) {
      this._routerPushName('MapServiceEdit', {resourceId: row.resourceId})
    },
    /**
     * {创建成功后触发}
     *
     * @author: 宋康
     * @date: 2023/2/14
     */
    createSuccess(val) {
      this.getDataList();
    },
    /**
     * {更新资源状态}
     *
     * @author: 宋康
     * @date: 2023/2/15
     */
    updatedState(row, state) {
      this._debounceT('5XYCwDre', () => updatedResourceItemState(row['resourceId'], state).then(res => {
        if (res.status) {
          this._success("修改完成")
          this.getDataList();
        } else {
          this._error(res.msg)
        }
      }), 300)
    },
    /**
     * {上传资源}
     *
     * @author: 宋康
     * @date: 2023/2/15
     */
    del(row) {
      this._debounceT('Uxtcaq3W', () => deletedResourceItem(row['resourceId']).then(res => {
        if (res.status) {
          this._success("修改完成")
          this.getDataList();
        } else {
          this._error(res.msg)
        }
      }), 300)
    }
  },
  mounted() {
    this.queryDict().then(() => {

    })
    this.getDataList();
  }
};
</script>

<style lang="scss" scoped>

</style>
